﻿<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../Styles/jqx.apireference.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../scripts/documentation.js"></script>
    <meta name="keywords" content="jQuery, Tree, jQuery Tree, TreeView, Tree Widget, jqxTree, jquery mobile tree, jquery mobile treeview" />
    <meta name="description" content="This page represents the help documentation of the jqxTree widget." />
    <title>jqxTree API Reference</title>
    <script type="text/javascript">
        $(document).ready(function () {
            $(".documentation-option-type-click").click(function (event) {
                $(event.target).parents('tr').next().find(".property-content").toggle();
            });
        });
    </script>
</head>
<body>
    <div id="properties">
        <h2 class="documentation-top-header">Properties</h2>
        <table class="documentation-table">
            <tr>
                <th>Name
                </th>
                <th>Type
                </th>
                <th>Default
                </th>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span4'>animationShowDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>350
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the duration of the show animation.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>animationShowDuration</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({ animationShowDuration: 500 }); </code></pre>
                        <p>
                            Get the <code>animationShowDuration</code> property.
                        </p>
                        <pre><code>var animationShowDuration = $('#jqxTree').jqxTree('animationShowDuration'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/mwskv/">animationShowDuration is set to 1000</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span5'>animationHideDuration</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>fast
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the duration of the hide animation.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>animationHideDuration</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({ animationHideDuration: 500 }); </code></pre>
                        <p>
                            Get the <code>animationHideDuration</code> property.
                        </p>
                        <pre><code>var animationHideDuration = $('#jqxTree').jqxTree('animationHideDuration'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Up7VT/">animationHideDuration is set to 1000</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span42'>allowDrag</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables the dragging of Tree Items.(requires jqxdragdrop.js)
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>allowDrag</code> property.
                        </p>
                        <pre><code>$("#jqxTree").jqxTree({allowDrag:true}); </code></pre>
                        <p>
                            Get the <code>allowDrag</code> property.
                        </p>
                        <pre><code>var allowDrag = $('#jqxTree').jqxTree('allowDrag'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aG7FF/">allowDrag is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span43'>allowDrop</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables the dropping of Tree Items.(requires jqxdragdrop.js)
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>allowDrop</code> property.
                        </p>
                        <pre><code>$("#jqxTree").jqxTree({allowDrop:true}); </code></pre>
                        <p>
                            Get the <code>allowDrop</code> property.
                        </p>
                        <pre><code>var allowDrop = $('#jqxTree').jqxTree('allowDrop'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aBYCY/">allowDrop is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span10'>checkboxes</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the tree should display a checkbox next to each item. In order to use this feature, you need
                       to include the jqxcheckbox.js.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>checkboxes</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({ checkboxes: true }); </code></pre>
                        <p>
                            Get the <code>checkboxes</code> property.
                        </p>
                        <pre><code>var checkboxes = $('#jqxTree').jqxTree('checkboxes'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/c3ZTB/">checkboxes is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span47'>dragStart</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback function which is called when a drag operation starts.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>dragStart</code> property.
                        </p>
                        <pre><code>$("#jqxTree").jqxTree({dragStart: function (item)
{
    // disable dragging of 'Café au lait' item.
    if (item.label == 'Café au lait')
    return false;
                        
    // enable dragging for the item.
    return true;
}
});
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/aQNUd/">dragStart is set to a custom function</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span48'>dragEnd</span>
                </td>
                <td>
                    <span>Function</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Callback function which is called when a drag operation ends.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>dragEnd</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({ allowDrag: true, allowDrop: true, height: '300px', width: '220px', dragEnd: function (dragItem, dropItem, args, dropPosition, tree)
{
    // dragItem is the item which is dragged by the user.
    // dropItem is the item over which we dropped the dragged item.
    // args - dragEvent event arguments.
    // dropPosition - the position of the dragItem regarding the possition of the dropItem. The possible values are: 'inside' - when the dragItem is dropped over the dropItem,
    'before' - when the dragItem is dropped above the dropItem.
    'after' - when the dragItem is dropped below the dropItem.
    // tree - the jqxTree's jQuery object associated to the dropItem. If the tree's id is 'tree', this returns $("#tree")                                                          
    // to cancel the drop operation, return false.    
}
});
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kDPyz/">dragEnd is set to a custom function</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span2'>disabled</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Gets or sets whether the tree is disabled.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>disabled</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({ disabled:true }); </code></pre>
                        <p>
                            Get the <code>disabled</code> property.
                        </p>
                        <pre><code>var disabled = $('#jqxTree').jqxTree('disabled');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/J2gFM/">disabled is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span3'>easing</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>'easeInOutCirc'
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the animation's easing to one of the JQuery's supported easings.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>easing</code> property .
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({ easing: 'easeInOutCirc' }); </code></pre>
                        <p>
                            Get the <code>easing</code> property.
                        </p>
                        <pre><code>var easing = $('#jqxTree').jqxTree('easing'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/m8k4K/">easing is set to 'easeInOutCirc'</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span6'>enableHover</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the hover state.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>enableHover</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({ enableHover: true }); </code></pre>
                        <p>
                            Get the <code>enableHover</code> property.
                        </p>
                        <pre><code>var enableHover = $('#jqxTree').jqxTree('enableHover'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/c8tjU/">enableHover is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span1'>height</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the tree's height.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>height</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({height:"400px"});</code></pre>
                        <p>
                            Get the <code>height</code> property.
                        </p>
                        <pre><code>var height = $('#jqxTree').jqxTree('height');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ntEC8/">height is set to '300px'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span11'>hasThreeStates</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets whether the tree checkboxes have three states - checked, unchecked and indeterminate.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>hasThreeStates</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({ hasThreeStates: true }); </code></pre>
                        <p>
                            Get the <code>hasThreeStates</code> property.
                        </p>
                        <pre><code>var hasThreeStates = $('#jqxTree').jqxTree('hasThreeStates'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/h9CAa/">hasThreeStates is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span112'>incrementalSearch</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Determines whether the incremental search is enabled. The feature allows you to quickly find and select items by typing when the widget is on focus.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>incrementalSearch</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({incrementalSearch:false});</code></pre>
                        <p>
                            Get the <code>incrementalSearch</code> property.
                        </p>
                        <pre><code>var incrementalSearch = $('#jqxTree').jqxTree('incrementalSearch');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pB4K6/">incrementalSearch is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span7'>keyboardNavigation</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>true
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Enables or disables the key navigation.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>keyboardNavigation</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({ keyboardNavigation: true }); </code></pre>
                        <p>
                            Get the <code>keyboardNavigation</code> property.
                        </p>
                        <pre><code>var keyboardNavigation = $('#jqxTree').jqxTree('keyboardNavigation'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/9DAMf/">keyboardNavigation is set to false</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span68'>rtl</span>
                </td>
                <td>
                    <span>Boolean</span>
                </td>
                <td>false
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Sets or gets a value indicating whether widget's elements are aligned to support locales using right-to-left fonts.</p>
                        <h4>Code example</h4>
                        <p>
                            Set the <code>rtl</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({rtl : true}); </code></pre>
                        <p>
                            Get the <code>rtl</code> property.
                        </p>
                        <pre><code>var rtl = $('#jqxTree').jqxTree('rtl'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hxz5N/">rtl is set to true</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span9'>source</span>
                </td>
                <td>
                    <span>Object</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Specifies the jqxTree's data source. Use this property to populate the jqxTree.
                        </p>
                        Each tree item in the source object may have the following fields:
                        <br />
                        Item Fields
                            <ul>
                                <li>label - sets the item's label.</li>
                                <li>value - sets the item's value.</li>
                                <li>html - item's html. The html to be displayed in the item.</li>
                                <li>id - sets the item's id.</li>
                                <li>disabled - sets whether the item is enabled/disabled.</li>
                                <li>checked - sets whether the item is checked/unchecked(when checkboxes are enabled).</li>
                                <li>expanded - sets whether the item is expanded or collapsed.</li>
                                <li>selected - sets whether the item is selected.</li>
                                <li>items - sets an array of sub items.</li>
                                <li>icon - sets the item's icon(url is expected).</li>
                                <li>iconsize - sets the size of the item's icon.</li>
                            </ul>
                        <h4>Code examples</h4>
                        <p>
                            Initialize a jqxTree with the <code>source</code> property specified.
                        </p>
                        <pre><code>
var source = [
    { label: "Item 1", expanded: true, items: [
        { label: "Item 1.1" },
        { label: "Item 1.2", selected: true }
    ]
    },
    { label: "Item 2" },
    { label: "Item 3" },
    { label: "Item 4", items: [
        { label: "Item 4.1" },
        { label: "Item 4.2" }
    ]
    },
    { label: "Item 5" },
    { label: "Item 6" },
    { label: "Item 7" }
];

    // create jqxTree
$('#jqxTree').jqxTree({ source: source, width: '330px'});
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/fFqzU/">source is set to source</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span12'>toggleIndicatorSize</span>
                </td>
                <td>
                    <span>Number</span>
                </td>
                <td>16
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets  the size of the expand/collapse arrows.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>toggleIndicatorSize</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({ toggleIndicatorSize: 0 }); </code></pre>
                        <p>
                            Get the <code>toggleIndicatorSize</code> property.
                        </p>
                        <pre><code>var toggleIndicatorSize = $('#jqxTree').jqxTree('toggleIndicatorSize'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3T38v/">toggleIndicatorSize is set to 20</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span8'>toggleMode</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>dblclick
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets user interaction used for expanding or collapsing any item.
                        </p>
                        <b>Possible Values:</b>
                        <br />
                        <pre><code>'click'</code></pre>
                        <pre><code>'dblclick'</code></pre>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>toggleMode</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({ toggleMode: 'click' }); </code></pre>
                        <p>
                            Get the <code>toggleMode</code> property.
                        </p>
                        <pre><code>var toggleMode = $('#jqxTree').jqxTree('toggleMode'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/X3vE7/">toggleMode is set to 'click'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span63'>theme</span>
                </td>
                <td>
                    <span>String</span>
                </td>
                <td>''
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the widget's theme.
                        </p>
                        jQWidgets uses a pair of css files - jqx.base.css and jqx.[theme name].css. The base stylesheet creates the styles related to the widget's layout like margin, padding, border-width, position. The second css file applies the widget's colors and backgrounds. The jqx.base.css should be included before the second CSS file.
                        In order to set a theme, you need to do the following:
                        <ul>
                            <li>Include the theme's CSS file after jqx.base.css.<br />
                                The following code example adds the 'energyblue' theme.
                                <pre><code>
<pre><code>&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.base.css&quot; type=&quot;text/css&quot; /&gt;
&lt;link rel=&quot;stylesheet&quot; href=&quot;../../jqwidgets/styles/jqx.energyblue.css&quot; type=&quot;text/css&quot; /&gt;
</code></pre>
</code></pre>
                            </li>
                            <li>Set the widget's theme property to 'energyblue' when you initialize it.
                            </li>
                        </ul>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/a6rZu/">theme is set to 'energyblue'</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='property-name-disabled'>width</span>
                </td>
                <td>
                    <span>Number/String</span>
                </td>
                <td>null
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the tree's width.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Set the <code>width</code> property.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree({width:"200px"});</code></pre>
                        <p>
                            Get the <code>width</code> property.
                        </p>
                        <pre><code>var width = $('#jqxTree').jqxTree('width');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/3TPhH/">width is set to '300px'</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">Events</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span16'>added</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user adds a new tree item. 
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>added</code> event by type: jqxTree.
                        </p>
                        <pre><code>$('#jqxTree').on('added', function (event) { // Some code here. }); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kE4xD/">Bind to the added event by type: jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span18'>checkChange</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user checks, unchecks or the checkbox is in indeterminate state.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>checkChange</code> event by type: jqxTree.
                        </p>
                        <pre><code>$('#jqxTree').on('checkChange', function (event) 
{
    var args = event.args;
    var element = args.element;
    var checked = args.checked;
}); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ASBn8/">Bind to the checkChange event by type: jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span13'>collapse</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user collapses a tree item.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>collapse</code> event by type: jqxTree.
                        </p>
                        <pre><code>$('#jqxTree').on('collapse',function (event) {
    var args = event.args;
    var item = $('#jqxTree').jqxTree('getItem', args.element);
    var label = item.label; 
});</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/GrU6M/">Bind to the collapse event by type: jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span45'>dragStart</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user starts a drag operation. 
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Bind to the <code>dragStart</code> event by type: jqxTree.
                        </p>
                        <pre><code>$("#jqxTree").on('dragStart', function (event) 
{
    // get item's label.
    var itemLabel = event.args.label;
    // get item's value.
    var itemValue = event.args.value;
    // get the original dragStart event from the jqxDragDrop plug-in.
    var originalEvent = event.args.originalEvent;
    // using the originalEvent, you can retrieve the mouse cursor's position.
    var x = event.args.originalEvent.pageX;
    var y = event.args.originalEvent.pageY;
    if (event.args.originalEvent.originalEvent.touches) {
    var touch = event.args.originalEvent.originalEvent.changedTouches[0];
    x = touch.pageX;
    y = touch.pageY;
}
});
                         </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/y9htx/">Bind to the dragStart event by type: jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span46'>dragEnd</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user drops an item.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Bind to the <code>dragEnd</code> event by type: jqxTree.
                        </p>
                        <pre><code>$("#jqxTree").on('dragEnd', function (event) 
{
    // get item's label.
    var itemLabel = event.args.label;
    // get item's value.
    var itemValue = event.args.value;
    // get the original dragStart event from the jqxDragDrop plug-in.
    var originalEvent = event.args.originalEvent;
    // using the originalEvent, you can retrieve the mouse cursor's position.
    var x = event.args.originalEvent.pageX;
    var y = event.args.originalEvent.pageY;
    if (event.args.originalEvent.originalEvent.touches) {
    var touch = event.args.originalEvent.originalEvent.changedTouches[0];
    x = touch.pageX;
    y = touch.pageY;
}
});
                         </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/7TT7r/">Bind to the dragEnd event by type: jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span27'>expand</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user expands a tree item.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>expand</code> event by type: jqxTree.
                        </p>
                        <pre><code>$('#jqxTree').on('expand', function (event) {
    var args = event.args;
    var item = $('#jqxTree').jqxTree('getItem', args.element);
    var label = item.label; 
});</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/M9KaF/">Bind to the expand event by type: jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span15'>initialized</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the jqxTree is created and initialized.  
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>initialized</code> event by type: jqxTree.
                        </p>
                        <pre><code>$('#jqxTree').on('initialized', function (event) { // Some code here. }); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/22jma/">Bind to the initialized event by type: jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span17'>removed</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user removes a tree item.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>removed</code> event by type: jqxTree.
                        </p>
                        <pre><code>$('#jqxTree').on('removed', function (event) { // Some code here. }); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/JbArT/">Bind to the removed event by type: jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span14'>select</span>
                </td>
                <td>
                    <span>Event</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            This event is triggered when the user selects a tree item.
                        </p>
                        <h4>Code examples</h4>
                        <p>
                            Bind to the <code>select</code> event by type: jqxTree.
                        </p>
                        <pre><code>$('#jqxTree').on('select',function (event)
{
    var args = event.args;
    var item = $('#jqxTree').jqxTree('getItem', args.element);
    var label = item.label; 
});
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ccegq/">Bind to the select event by type: jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <h2 class="documentation-top-header">Methods</h2>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span25'>addBefore</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Adds an item as a sibling of another item.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>addBefore</code> method.
                        </p>
                        <pre><code>
$('#jqxTree').jqxTree('addBefore', newElement, element);
                        </code></pre>
                        <br />
                        The following code adds a new item before the first tree item:
                        <pre><code>
var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
var firstItemElement = firstItem.element;
$('#jqxTree').jqxTree('addBefore', { label: 'Item' }, firstItemElement);
</code></pre>
                        <br />
                        The following code adds a new item before a tree item by using the item's ID.
                        <pre><code>
var elementByID = $('#jqxTree').find("#home")[0];
$('#jqxTree').jqxTree('addBefore', { label: 'Item' }, elementByID);
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/EBLCX/">adds new item in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span53'>addAfter</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Adds an item as a sibling of another item.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>addAfter</code> method.
                        </p>
                        <pre><code>
$('#jqxTree').jqxTree('addAfter', newElement, element);
                        </code></pre>
                        <br />
                        The following code adds a new item after the first tree item:
                        <pre><code>
var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
var firstItemElement = firstItem.element;
$('#jqxTree').jqxTree('addAfter', { label: 'Item' }, firstItemElement);
</code></pre>
                        <br />
                        The following code adds a new item after a tree item by using the item's ID.
                        <pre><code>
var elementByID = $('#jqxTree').find("#home")[0];
$('#jqxTree').jqxTree('addAfter', { label: 'Item' }, elementByID);
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/DPK78/">adds new item in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span19'>addTo</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Adds an item.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>addTo</code> method.
                        </p>
                        <pre><code>// @param element (li tag) 
// @param parentElement (li tag) - optional parameter, which specifies the parent item. If not specified, the new element is added as last tree item. 
$('#jqxTree').jqxTree('addTo', element, parentElement);
                        </code></pre>
                        <br />
                        The following code adds a new item to the jqxTree:
                        <pre><code>
$('#jqxTree').jqxTree('addTo', { label: 'Item' });
</code></pre>
                        <br />
                        The following code adds a new sub item to the first tree item:
                        <pre><code>
var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
var firstItemElement = firstItem.element;
$('#jqxTree').jqxTree('addTo', { label: 'Item' }, firstItemElement);
</code></pre>
                        <br />
                        The following code adds a new sub item to a tree item by using the item's ID.
                        <pre><code>
var elementByID = $('#jqxTree').find("#home")[0];
$('#jqxTree').jqxTree('addTo', { label: 'Item' }, elementByID);
</code></pre>
                        The following code adds a new item with custom HTML and specific ID to the jqxTree.
                        <pre style='margin: 10px;' class='code'>$(<span style=" clear: both; padding: 0px; margin: 0px;">'#jqxTree').jqxTree('addTo', { html: <span style="clear: both; padding: 0px; margin: 0px;>"<span style="clear: both; padding: 0px; margin: 0px; color: #11a;">&lt;span style='font-weight: bold;' id='myItem'</span>&gt;</span>Item<span style="clear: both; padding: 0px; margin: 0px;>&lt;/span&gt;</span>"</span> });<div/></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/t29qD/">adds new sub item in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span33'>clear</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Removes all elements.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>clear</code> method.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree('clear');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/kNvRR/">clears all items in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span44'>checkAll</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Checks all tree items.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>checkAll</code> method.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree('checkAll');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZKu6Z/">checks all items  in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span22'>checkItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Checks a tree item.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>checkItem</code> method.
                        </p>
                        <pre><code>// @param element (li tag) 
// @param true, false or null. - CheckBox state.
$('#jqxTree').jqxTree('checkItem', element, true);
                         </code></pre>
                        <br />
                        // check an item with id="home"
                        <pre><code>
var newCheckState = true;
$("#jqxTree").jqxTree('checkItem', $("#home")[0], newCheckState);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pMZS7/">checks an item  in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span29'>collapseAll</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Collapses all items.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>collapseAll</code> method.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree('collapseAll');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Hnyrt/">collapse all items in the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span31'>collapseItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Collapses a tree item by passing an element as parameter.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>collapseItem</code> method.
                        </p>
                        <pre><code>// @param element (li tag) 
$('#jqxTree').jqxTree('collapseItem', element);
                        </code></pre>
                        <br />
                        // Collapse item with id="home"
                        <pre><code>
$("#jqxTree").jqxTree('collapseItem', $("#home")[0]);
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/p4Tj9/">collapse an item in the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span52'>destroy</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Destroy the jqxTree widget. The destroy method removes the jqxTree widget from the web page.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>destroy</code> method.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree('destroy');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/26aEY/">destroy the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span21'>disableItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Disables a tree item.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>disableItem</code> method.
                        </p>
                        <pre><code>// @param element (li tag) 
$('#jqxTree').jqxTree('disableItem', element);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/smv8K/">disables an item  in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span37'>ensureVisible</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Ensures the visibility of an element.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>ensureVisible</code> method.
                        </p>
                        <pre><code>// @param element (li tag) 
$('#jqxTree').jqxTree('ensureVisible', element);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/VvB6g/">ensures the vizibility of an element in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span23'>enableItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Enables a tree item.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>enableItem</code> method.
                        </p>
                        <pre><code>// @param element (li tag) 
$('#jqxTree').jqxTree('enableItem', element);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/H7sTs/">enables an item  in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span30'>expandAll</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Expandes all items.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>expandAll</code> method.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree('expandAll');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/QgKMu/">expand all items in the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>



            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span32'>expandItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Expands a tree item by passing an element as parameter.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>expandItem</code> method.
                        </p>
                        <pre><code>// @param element (li tag) 
$('#jqxTree').jqxTree('expandItem', element);
                        </code></pre>
                        <br />
                        // Expand item with id="home"
                        <pre><code>
$("#jqxTree").jqxTree('expandItem', $("#home")[0]);
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/ZaaBJ/">expand an item in the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span55'>focus</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets the focus to the widget.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>focus</code> method.
                        </p>
                        <pre><code>$("#jqxTree").jqxTree('focus'); </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4a7jG/">focuses the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span40'>getCheckedItems</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Gets an array with all checked tree items.</p>
                        Each tree item has the following fields:
                        <br />
                        Item Fields
                            <ul>
                                <li>label - gets item's label.</li>
                                <li>value - gets the item's value.</li>
                                <li>disabled - gets whether the item is enabled/disabled.</li>
                                <li>checked - gets whether the item is checked/unchecked.</li>
                                <li>element - gets the item's LI tag.</li>
                                <li>parentElement - gets the item's parent LI tag.</li>
                                <li>isExpanded - gets whether the item is expanded or collapsed.</li>
                                <li>selected - gets whether the item is selected or not.</li>
                            </ul>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getCheckedItems</code> method.
                        </p>
                        <pre><code>var items = $('#jqxTree').jqxTree('getCheckedItems');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/tEDgb/">Invoke the getCheckedItems method of the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span41'>getUncheckedItems</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Gets an array with all unchecked tree items.</p>
                        Each tree item has the following fields:
                        <br />
                        Item Fields
                            <ul>
                                <li>label - gets item's label.</li>
                                <li>value - gets the item's value.</li>
                                <li>disabled - gets whether the item is enabled/disabled.</li>
                                <li>checked - gets whether the item is checked/unchecked.</li>
                                <li>element - gets the item's LI tag.</li>
                                <li>parentElement - gets the item's parent LI tag.</li>
                                <li>isExpanded - gets whether the item is expanded or collapsed.</li>
                                <li>selected - gets whether the item is selected or not.</li>
                            </ul>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getUncheckedItems</code> method.
                        </p>
                        <pre><code>var items = $('#jqxTree').jqxTree('getUncheckedItems');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6pC5L/">Invoke the getUncheckedItems method of the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span26'>getItems</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Gets an array with all tree items.</p>
                        Each tree item has the following fields:
                        <br />
                        Item Fields
                            <ul>
                                <li>label - gets item's label.</li>
                                <li>value - gets the item's value.</li>
                                <li>disabled - gets whether the item is enabled/disabled.</li>
                                <li>checked - gets whether the item is checked/unchecked.</li>
                                <li>element - gets the item's LI tag.</li>
                                <li>parentElement - gets the item's parent LI tag.</li>
                                <li>isExpanded - gets whether the item is expanded or collapsed.</li>
                                <li>selected - gets whether the item is selected or not.</li>
                            </ul>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getItems</code> method.
                        </p>
                        <pre><code>var items = $('#jqxTree').jqxTree('getItems');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/W4NZw/">Invoke the getItems method of the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span34'>getItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Gets the tree item associated to a LI tag passed as parameter. The returned value is an Object.</p>
                        <br />
                        Item Fields
                            <ul>
                                <li>label - gets item's label.</li>
                                <li>value - gets the item's value.</li>
                                <li>disabled - gets whether the item is enabled/disabled.</li>
                                <li>checked - gets whether the item is checked/unchecked.</li>
                                <li>element - gets the item's LI tag.</li>
                                <li>parentElement - gets the item's parent LI tag.</li>
                                <li>isExpanded - gets whether the item is expanded or collapsed.</li>
                                <li>selected - gets whether the item is selected or not.</li>
                            </ul>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getItem</code> method.
                        </p>
                        <pre><code>// @param element (li tag) 
var item = $('#jqxTree').jqxTree('getItem', element);</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/4ssYx/">Invoke the getItem method of the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span38'>getSelectedItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Gets the selected tree item.</p>
                        <br />
                        Item Fields
                            <ul>
                                <li>label - gets item's label.</li>
                                <li>value - gets the item's value.</li>
                                <li>disabled - gets whether the item is enabled/disabled.</li>
                                <li>checked - gets whether the item is checked/unchecked.</li>
                                <li>element - gets the item's LI tag.</li>
                                <li>parentElement - gets the item's parent LI tag.</li>
                                <li>isExpanded - gets whether the item is expanded or collapsed.</li>
                                <li>selected - gets whether the item is selected or not.</li>
                            </ul>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getSelectedItem</code> method.
                        </p>
                        <pre><code>var item = $('#jqxTree').jqxTree('getSelectedItem');</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/BQ7a6/">Invoke the getSelectedItem method of the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span35'>getPrevItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Gets the item above another item. The returned value is an Object.</p>
                        <br />
                        Item Fields
                            <ul>
                                <li>label - gets item's label.</li>
                                <li>value - gets the item's value.</li>
                                <li>disabled - gets whether the item is enabled/disabled.</li>
                                <li>checked - gets whether the item is checked/unchecked.</li>
                                <li>element - gets the item's LI tag.</li>
                                <li>parentElement - gets the item's parent LI tag.</li>
                                <li>isExpanded - gets whether the item is expanded or collapsed.</li>
                                <li>selected - gets whether the item is selected or not.</li>
                            </ul>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getPrevItem</code> method.
                        </p>
                        <pre><code>var selectedItem = $("#jqxTree").jqxTree('selectedItem');
var prevItem = $("#jqxTree").jqxTree('getPrevItem', selectedItem.element);
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6L43j/">Invoke the getPrevItem method of the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span36'>getNextItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Gets the item below another item. The returned value is an Object.</p>
                        <br />
                        Item Fields
                            <ul>
                                <li>label - gets item's label.</li>
                                <li>value - gets the item's value.</li>
                                <li>disabled - gets whether the item is enabled/disabled.</li>
                                <li>checked - gets whether the item is checked/unchecked.</li>
                                <li>element - gets the item's LI tag.</li>
                                <li>parentElement - gets the item's parent LI tag.</li>
                                <li>isExpanded - gets whether the item is expanded or collapsed.</li>
                                <li>selected - gets whether the item is selected or not.</li>
                            </ul>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>getNextItem</code> method.
                        </p>
                        <pre><code>var selectedItem = $("#jqxTree").jqxTree('selectedItem');
var nextItem = $("#jqxTree").jqxTree('getNextItem', selectedItem.element);
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/zHr3E/">Invoke the getNextItem method of the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span56'>hitTest</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Gets an item at specific position. The method expects 2 parameters - left and top. The coordinates are relative to the document.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>hitTest</code> method.
                        </p>
                        <pre><code>var item = $('#jqxTree').jqxTree('hitTest', 10, 20);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/8KQpc/">Invoke the hitTest method of the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span20'>removeItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Removes an item.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>removeItem</code> method.
                        </p>
                        <pre><code>// @param element (li tag) 
$('#jqxTree').jqxTree('removeItem', element);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/Jbeeu/">removes an item in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span39'>render</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Renders the jqxTree widget.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>render</code> method.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree('render');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/rUL6y/">renders the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span51'>refresh</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Refreshes the jqxTree widget. The refresh method will update the jqxTree's layout and size.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>refresh</code> method.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree('refresh');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/hM9mL/">refresh the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span28'>selectItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Selects an item.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>selectItem</code> method.
                        </p>
                        <pre><code>// @param element (li tag)          
$('#jqxTree').jqxTree('selectItem', element);
                        </code></pre>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>selectItem</code> method.
                        </p>
                        <pre><code>
 $('#jqxTree').jqxTree('selectItem', $("#jqxTree").find('li:first')[0]);
                        </code></pre>
                        <br />
                        // Select item with id="home"
                        <pre><code>
$("#jqxTree").jqxTree('selectItem', $("#home")[0]);
</code></pre>
                        <br />
                        // Clear selection.
                        <pre><code>
$("#jqxTree").jqxTree('selectItem', null);
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/yWBZJ/">selects item in the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span49'>uncheckAll</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Unchecks all tree items.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>uncheckAll</code> method.
                        </p>
                        <pre><code>$('#jqxTree').jqxTree('uncheckAll');
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/6YMr8/">unchecks all items  in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>

            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span50'>uncheckItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Unchecks a tree item.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>uncheckItem</code> method.
                        </p>
                        <pre><code>// @param element (li tag) 
$('#jqxTree').jqxTree('uncheckItem', element);
                         </code></pre>
                        <br />
                        // uncheck an item with id="home"
                        <pre><code>
var newCheckState = true;
$("#jqxTree").jqxTree('uncheckItem', $("#home")[0]);
                        </code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/pD3by/">unchecks an item  in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span54'>updateItem</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>Updates an item.</p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>updateItem</code> method.
                        </p>
                        <pre><code>// @param element (li tag) 
$('#jqxTree').jqxTree('updateItem', element, {label: "New Label"});
                        </code></pre>
                        The following code updates the first item.
                        <pre><code>
var treeItems = $("#jqxTree").jqxTree('getItems');
var firstItem = treeItems[0];
$('#jqxTree').jqxTree('updateItem', firstItem, { label: 'Item' });
</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/vDxbQ/">updates an item in the  jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
            <tr>
                <td class="documentation-option-type-click">
                    <span id='Span24'>val</span>
                </td>
                <td>
                    <span>Method</span>
                </td>
                <td></td>
            </tr>
            <tr>
                <td colspan='3' style='width: 100%'>
                    <div class="documentation-option-description property-content" style="display: none;">
                        <p>
                            Sets or gets the selected item.
                        </p>
                        <h4>Code example</h4>
                        <p>
                            Invoke the <code>val</code> method.
                        </p>
                        // Get the selected item.
                        <pre><code>var value = $("#jqxTree").jqxTree('val');</code></pre>
                        // Get the selected tab's index using jQuery's val()
                        <pre><code>var value = $("#jqxTree").val();</code></pre>
                        // Set the selected item. The element should be a LI tag from the jqxTree's HTML Structure.
                            <pre><code>$("#jqxTree").jqxTree('val', element);</code></pre>
                        // Set the selected tab using jQuery's val().
                            <pre><code>$("#jqxTree").val(element);</code></pre>
                        <div style="padding-bottom: 5px;">
                            <em>Try it:</em> <a target="_blank" href="http://jsfiddle.net/jqwidgets/XGUrU/">Invoke the val method of the jqxTree.</a>
                        </div>
                    </div>
                </td>
            </tr>
        </table>
        <br />
    </div>
</body>
</html>
